<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
		<style>
			/*这个指令页面选择器，有这个属性就执行这个样式*/
			[v-cloak]{
				display:none;//隐藏
			}
		</style>
	</head>
	<body>
		<h3>姓名（单值），年龄（单值），爱好（数组），
		偶像(对象)，豪车（对象数组）</h3>
		<div id="app">
			{{name}},{{age}}
			<hr>
			{{hobby}},{{hobby[0]}},{{hobby[hobby.length-1]}}
			<hr >
			{{player.name}},{{player.age}} 
			<hr>
			{{cars[0].name}},{{cars[0].color}}<br>
			{{cars[cars.length-1].name}}
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"hello VueJs",
				name:"zhang",//字符串类型两边使用双引号或者单引号
				age:21,//整数直接写
			hobby:["篮球","足球","羽毛球"],//字符串数组
			player:{
			    name:"paul",
			    age:"34"
		        },
			cars:[
				{name:"劳斯莱斯",color:"white"},
				{name:"奔驰",color:"red"},
				{name:"BWM",color:"black"}
			]
				}
	
			
		});
	</script>
</html>
